.knowledgeLibrary-container {
  width: 100%;
  height: calc(100vh - 136px);
  min-width: 820px;

  .knowledgeLibrary-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    // padding-bottom: 16px;
    overflow-y: auto;
    border-radius: 4px;

    .kl-tilte {
      height: 24px;
      font-size: 16px;
      line-height: 24px;
      color: var(--o-text-color-primary);
      font-weight: 700;
      width: calc(100% - 24px);
    }

    .kl-ops {
      display: flex;
      justify-content: space-between;
      width: calc(100% - 24px);
      margin-top: 16px;

      .kl-left-btn {
        display: flex;
        align-items: center;

        &>button{
          margin-right: 8px;
          margin-left: 0px !important;
        }
        
        .createAsset,
        .ImportAsset {
          font-size: 12px;
          font-weight: 500;
        }

        .createAsset {
          padding: 8px 18px;
        }

        .ImportAsset {
          padding: 8px 16px;
          margin-left: 0px;
        }

        .el-button--primary {
          background: rgb(99 149 253);
        }
        .el-dropdown{
          margin-right: 8px;
          .dropdown-disabled{
            cursor: not-allowed;
          }
          .upBtn{
            border-color: #6395FD !important;
            color: #6395FD !important;
          }
        }

        .multipleSelect{
          margin-right: 8px;
          display: flex;
          align-items: center;
          .el-checkbox.el-checkbox--large{
            height: 20px;
          }
          & span{
            font-size: 12px;
            font-weight: 400;
          }

        }
      }

      .kl-right-btn {
        display: flex;
        gap: 8px;

        .kl-btn-search {
          width: 356px;
          height: 32px;

          .el-input__icon {
            font-size: 16px;
          }

          .el-input__inner {
            font-size: 12px !important;
            line-height: 16px;
          }

          .el-input__wrapper {
            padding-right: 8px !important;
          }
        }

        .kl-btn-switch {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          width: 64px;
          height: 32px;
          border: 1px solid var(--o-border-color-light);
          border-radius: 4px;
          overflow: hidden;

          .kl-btn-switch-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            cursor: pointer;

            .el-icon {
              color: #8d98aa;
              font-size: 16px !important;
            }
          }

          .bgThumb {
            height: 32px;
            background: rgb(99,149,253);

            .el-icon {
              color: white;
              font-size: 16px !important;
            }
          }
        }
      }
    }

    .kl-card-box {
      box-sizing: border-box;
      height: 100%;
      margin: 16px 0;
      overflow-y: auto;
      width: calc(100% - 24px);
    }

    .kl-card {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 16px;

      .kl-single-card {
        display: flex;
        flex-direction: column;
        padding: 16px;
        background: var(--o-bg-color-light);
        border-radius: 8px;
        border: 1px solid transparent;
        cursor: pointer;

        &.is-checked {
          border: 2px solid rgb(99, 149, 253);
          padding: 15px;
        }

        .kl-card-top {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .kl-card-name {
            width: 90%;
            height: 24px;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            color: var(--o-text-color-primary);
          }
          .el-checkbox{
            height: 20px;
            .el-checkbox__inner{
              width: 18px !important;
              height: 18px !important;
            }

            .el-checkbox__input.is-checked .el-checkbox__inner:after {
              transform: rotate(45deg) scale(1.5) translate(2.5px) !important;
            }
          }

          .kl-card-more-icon {
            height: 24px;
            .icon-more{
              display: inline-block;
              cursor: pointer;
              width: 24px;
              height: 24px;
              background-image: url(@/assets/svg/more.svg);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              &:hover {
                background-image: url(@/assets/svg/more_hover.svg);
              }
              &:active,&:focus {
                background-image: url(@/assets/svg/more_active.svg);
              }
            }
          }
        }

        .kl-card-desc {
          flex: 1;
          font-size: 12px;
          line-height: 16px;
          letter-spacing: 0px;
          color: var(--o-text-color-secondary);
          width: 396px;
          margin-bottom: 16px;
          margin-top: 8px;
        }

        .kl-card-footer {
          display: flex;
          gap: 16px;
          align-items: center;
          color: var(--o-text-color-tertiary);
          width: 100%;
          font-size: 12px;

          .el-icon {
            font-size: 16px;
          }

          .kl-card-file-icon {
            display: flex;
            gap: 2px;
            align-items: center;

            .kl-card-file {
              display: flex;
              width: 90%;
              align-items: center;;
              font-weight: 500;

              .kl-file-text {
                width: 95%;
                display: inline-block;
              }
            }
          }

          .kl-card-timer-icon {
            display: flex;
            gap: 4px;
            align-items: center;

            .kl-card-timer {
            }
          }
        }

        .kl-card-id {
          font-size: 12px;
          width: 330px !important;
          margin-bottom: 8px;
          height: 16px;
          line-height: 16px;
          .id-label,
          .id-value {
            display: inline-block;
            letter-spacing: 0;
            color: rgb(141 152 170);
            line-height: 16px;
            height: 16px;
          }
          .id-copy{
            margin-left: 5px;
            color: var(--o-text-color-tertiary);
            position: relative;
            top: 1px;
            &:hover {
              color: #7AA5FF;
            }
            &:active{
              color: #6395FD;
            }
          }

          .id-label {
            font-family: 'HarmonyOS Sans SC Regular';
            font-weight: 700;
          }
        }
      }
    }

    @media screen and (width <=1560px) {
      .kl-card-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, 428px);
        grid-gap: 16px;
      }
    }

    @media screen and (width >=1560px) {
      .kl-card-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, 428px);
        grid-gap: 16px;
      }
    }

    .pageNoData {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 12px;
      color: rgb(78 88 101);
    }
  }

  .knowledgeLibrayList {
    padding-bottom: unset !important;
  }

  .kl-table-box {
    padding: 16px 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 200px;
    width: calc(100% - 24px);

    tbody {
      td {
        border-right: unset !important;
      }
    }

    .el-table.is-scrolling-left.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell {
      border-right: unset !important;
    }

    .el-table__header {
      width: 100% !important;

      height: 32px;
      box-shadow: inset 0 -1px 0 0 rgb(223 229 239);

      thead tr th {
        background-color: #f4f6fa;
      }
    }

    .kl-name-row {
      color: rgb(99, 149, 253);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
    }

    .kl-id {
      .el-icon {
        color: #8d98aa;
      }
    }

    .el-table__body {
      width: 100% !important;

      .el-table__row {
        height: 48px;
      }
    }

    .el-table__cell {
      padding: 0 8px !important;
      font-size: 12px;
    }

    .el-table--border .el-table__cell:first-child .cell {
      padding: 0 12px !important;
    }

    .el-table-column--selection .cell {
      padding-right: 0 !important;
      padding-left: 22px;
    }

    .kl-selection::after {
      content: unset !important;
    }

    .el-pagination {
      margin-top: 0;
      margin-bottom: 24px;
    }

    .el-pagination .el-input__inner {
      height: var(--el-input-inner-height) !important;
    }
  }

  .o-export-progress-notify {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1;
    width: 400px;
    overflow: hidden;
    background-color: var(--o-bg-color-base);
    border-color: var(--o-bg-color-base);
    border-radius: 8px;
    box-shadow: var(--o-task-box-shadow);

    .o-export-notify__head {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 56px;
      padding: 4px 16px;
      font-size: var(--o-font-size-text);
      line-height: var(--o-line-height-text);
      color: var(--o-text-color-primary);
      background-color: var(--o-bg-color-light);

      .task-list {
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
      }

      .nofity-show {
        display: flex;
        align-items: center;
        width: 20px;
        height: 100%;
      }
    }

    .o-export-notify__body {
      padding: 0px 16px 8px;
      background-color: var(--o-bg-color-light);
    }

    .o-export-notify__list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-height: 500px;
      overflow-y: auto;

      .item {
        max-height: 112px;
        padding: 16px;
        background: var(--o-bg-color-base);
        border-radius: 4px;

        .el-progress__text {
          min-width: 10px;
        }
      }

      .item-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--o-text-color-primary);
      }

      .item-info {
        display: flex;
      }

      .item-close {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }

      .item-name {
        max-width: 240px;
        font-size: 12px;
        font-weight: 700;
        flex: 1;

        .item-name-text {
          font-size: 12px;
        }
      }

      .item-file-size {
        max-width: 60px;
      }

      .taskStatusPer {
        margin-top: 8px;
      }

      .waitExport,
      .packData {
        display: flex;
        gap: 4px;
        align-items: center;
        height: 32px;
        font-family: 'HarmonyOS Sans SC Regular', sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        color: var(--o-text-color-primary);

        .el-icon {
          font-size: 14px;
        }
      }

      @keyframes rotate-img {
        from {
          transform: rotate(0);
        }

        to {
          transform: rotate(360deg);
        }
      }

      .icon-loading {
        height: 16px;
        width: 16px;
        background-repeat: no-repeat !important;
        background-size: 100% !important;
        display: inline-block;
        background: url('/src/assets/icons/taskLoading.png');
      }

      .icon-box {
        animation: rotate-img 0.8s infinite linear;
      }

      .errorIcon {
        width: 16px;
        height: 16px;

        path {
          color: rgb(228 33 33) !important;
        }
      }

      .successIcon {
        width: 14px;
        height: 14px;

        path {
          color: rgb(36 171 54) !important;
        }
      }

      .successTask {
        margin-left: 18px;
        font-size: 12px;
        color: rgb(99,149,253);
        cursor: pointer;
      }

      .opsExportTask {
        margin-bottom: 24px;
      }

      .errorRestart {
        font-size: 12px;
        color: rgb(99,149,253);
        cursor: pointer;
      }

      .errorReson {
        margin-left: 18px;
        font-size: 12px;
        color: rgb(141 152 170);
      }

      .errorTask {
        display: flex;
        gap: 4px;
      }

      .upload-success,
      .upload-error {
        display: flex;
        gap: 6px;
        align-items: center;
        margin-top: 6px;
        font-size: 12px;
        color: rgb(228 33 33);

        .el-icon {
          font-size: 14px;

          path {
            fill: rgb(228 33 33);
          }
        }
      }

      .upload-restart {
        color: rgb(99,149,253);
        cursor: pointer;
      }
    }

    .item-all-close {
      width: 100%;
      margin-top: 16px;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 700;
      color: rgb(99,149,253);
      text-align: right;
      cursor: pointer;
    }

    .o-export-notify__close {
      position: absolute;
      right: 16px;
      font-size: var(--o-font-size-body);
      color: var(--o-text-color-secondary);
      cursor: pointer;

      &:hover {
        color: var(--o-text-color-primary);
      }
    }
  }
}

.chooseFileBtn {
  padding: 4px 8px;
}

.tip-dialog {
  .delTip {
    display: flex;
    gap: 17px;
    align-items: center;
    color: var(--o-text-color-secondary);
  }

  .iconAlarmOrange {
    svg {
      width: 28px;
      height: 24px;
    }
  }
}

.delTipDialog {
  .el-dialog__header {
    height: 56px !important;
  }

  .el-dialog__body {
    height: 128px !important;
  }

  .delTip {
    height: 24px !important;
    color: var(--o-text-color-secondary);
  }
}

.asset-custom-header {
  display: flex;
  gap: 4px;
  align-items: center;

  .searchIconIsActive {
    color: rgb(99, 149, 253) !important;
  }

  .el-icon {
    font-size: 16px;
    color: #8d98aa;
  }

  .el-icon:hover {
    color: rgb(99, 149, 253);
  }

  svg {
    width: 16px;
    height: 16px;
  }
}

.asset-upload-time-cell .cell {
  display: flex;
  align-items: center;
}

.asset-id-custom-header {
  display: flex;
  gap: 4px;
  align-items: center;
}

.asset-id-custom-header svg {
  width: 16px;
  height: 16px;
}

.asset-id-custom-header .el-icon {
  font-size: 16px;
}

.searchIconIsActive {
  color: rgb(99, 149, 253) !important;
}

.timePng,
.filePng {
  width: 16px;
  height: 16px;
}

.assetDro {
  .el-dropdown-menu {
    padding: 4px 0 !important;
  }
}

.kf-ops-dowlon {
  .el-dropdown-menu {
    padding: 4px 0 !important;
    .el-dropdown-menu__item {
      font-size: 12px;
    }
  }
}